<template>
  <div id="app">
    <!-- 头部 -->
    <!-- <mt-header fixed :title="$store.state.title">
        <mt-button icon='back' slot="left" @click="goBack"></mt-button>
    </mt-header> -->

    <router-view></router-view>

    <!-- 底部 -->
    <!-- <mt-tabbr fixed>
      <mt-tab-item id="首页" >
        <div class="index" @click="jumpToTabPage(1)">首页</div>
      </mt-tab-item>
      <mt-tab-item id="发现" >
        <div class="index" @click="jumpToTabPage(2)">发现</div>
      </mt-tab-item>
      <mt-tab-item id="我的">
        <div class="index" @click="jumpToTabPage(3)">我的</div>
      </mt-tab-item>
    </mt-tabbr> -->
    <!-- @jumpRouter='jumpRouter' -->
    <!-- <tabbar
      @click="getTabbarFn"
      ref='tabbar'
    >
    </tabbar> -->
  </div>
</template>

<script>
// import index from './views/index'
// import tabbar from './views/tabbar'
import { Header,Button,Tabbar,TabItem } from 'mint-ui'
import tabbar from './components/tabbar'

export default {
  name: 'app',
  components: {
    // index,
    tabbar,
    mtHeader: Header,
    mtTabbr: Tabbar,
    mtTabItem: TabItem,
    mtButton: Button
  },
  methods: {
    // 接受子组件参数，并监听子组件发射的事件
    jumpRouter(type) {
      if (type === 0) {
        this.$router.push({path: '/'})
      }
      if (type === 1) {
        this.$router.push({path: '/discover'})
      }
      if (type === 2) {
        this.$router.push({path: '/focus'})
      }
      if (type === 3) {
        this.$router.push({path: '/me'})
      }
    },
    // 直接触发子组件的事件
    getTabbarFn() {
      this.$refs.tabbar.jumpRouter()
    },
    // 返回上一级
    goBack() {
      this.$router.go(-1)
    }
  },
  created () {
  },
  data () {
    return {
      toptitle: this.$store.state.title
    }
  }
}
</script>

<style lang="scss" >
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  // margin-top: 40px;
  box-sizing: border-box;
  padding-top: 40px;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}
</style>
